<template lang="html">
  <div>
    <div class="search">
        <div class="input">
            <p><label>分类名称：</label><el-input placeholder="请输入内容" v-model="ruleForm.name" ></el-input></p>
            <p><el-button type="primary" class="se" style="margin-left:10px;" @click="search">搜索</el-button></p>
        </div>
    </div>
    <div class="add">
       <el-button type="primary" @click="add">新增</el-button>
    </div>
    <tableVue :list="list" :state="false" v-loading="ruleForm.loading" :total="total" @sizeChange="handSize">
        <slot>
          <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="compile(scope.row)">编辑
                </el-button>
                <el-button
                  size="mini"
                  type="danger"
                  class="del"
                  @click="del(scope.row)">删除</el-button>
              </template>
          </el-table-column>
        </slot>
    </tableVue>
    <dialogVue title="操作" :dialog="dialog" @close="changeData" :state="false" >
        <slot>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
                <el-form-item label="质检类目名称" prop="categoryName">
                    <el-input v-model="ruleForm.categoryName" placeholder="请输入内容"></el-input>
                 </el-form-item>
                 <el-form-item class="confirm">
                     <el-button type="primary" v-if="ruleForm.btnState=='1'" @click="upForm('post')">确定</el-button>
                     <el-button type="primary" v-if="ruleForm.btnState=='2'" @click="upForm('put')">更新</el-button>
                 </el-form-item>
            </el-form>
        </slot>
    </dialogVue>
  </div>
</template>

<script>
import Data from './qualityClassData.js'
import dialogVue from '@/components/dialog.vue'
import tableVue from '@/components/alltable.vue'
import {
  qualityClassList,
  addqualityClass,
  delqualityClass
} from "@/api/shoppingCentre/shoppingCentre";
export default {
  components : {
    tableVue,
    dialogVue
  },
  data () {
    return JSON.parse(JSON.stringify(Data))
  },
  mounted () {
    this.getqualityClassList();
  },
  methods : {
    getqualityClassList (data) {
      this.ruleForm.loading = true;
      qualityClassList(data).then(res=>{
        if (res.data.code == 'OK') {
          this.total = res.data.data.total;
          this.list.tbody = res.data.data.records.map(item=>{
             item.gmtCreate = this.switchTime(item.gmtCreate)
             item.gmtUpdate = this.switchTime(item.gmtUpdate)
             item.isAlias = item.isAlias == 'Y' ? '是' : '否'
             return item;
          });
          this.ruleForm.loading = false;
        }
      })
    },
    add () {
      this.ruleForm = {};
      this.dialog = true;
      this.ruleForm.btnState = '1';
      this.$refs.ruleForm&&this.$refs.ruleForm.resetFields()
    },
    upForm (method) {
      this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            var data = {
              categoryName :this.ruleForm.categoryName,
              qualifyCategoryId :this.ruleForm.qualifyCategoryId
            }
            addqualityClass(data,method).then(res=>{
              if (res.data.code == 'OK') {
                this.getqualityClassList();
                this.dialog = false;
                if (method == 'post') {
                    this.$message.success('新增成功');
                } else {
                    this.$message.success('编辑成功');
                }
              }
            })
          }
      })
    },
    changeData (data) {
      this.dialog = data;
    },
    search () {
      var data = {
        categoryName :this.ruleForm.name
      }
      this.getqualityClassList(data);
    },
    handSize (val) {
      var data = {
        categoryName :this.ruleForm.name,
        current :val,
        size : '10'
      }
      this.getqualityClassList(data);
    },
    compile (item) {
      this.dialog = true;
      this.ruleForm.btnState = '2';
      this.ruleForm.categoryName = item.categoryName;
      this.ruleForm.qualifyCategoryId = item.qualifyCategoryId;
    },
    del (item) {

      this.delMessage(()=>{
        var id = []
        id.push(item.qualifyCategoryId)
        delqualityClass(id).then(res=>{
          if (res.data.code == 'OK') {
            this.$message.success('删除成功');
              this.getqualityClassList();
          } else {
            this.$message.error(res.data.message);
          }
        })
      })
    }
  }
}
</script>

<style scoped>
  @import "../../../../styles/common.css";
</style>
